<template>
    <div id='' class='i_remove'>
        <Modal v-model="isShow" :width="width" :mask-closable="false" :class-name="'i_remove'" footer-hide :closable="false" :styles="{top:top}" :style="configStyle">
            <div class="content" :style="{height:height}">
                <div class="header">
                    <div class="icon">
                        <Icon :size="28" :color="iconColor" :type="icon" />
                    </div>
                    <div class="title">{{title}}</div>
                </div>
                <div class="view">
                    <div class="text">{{content}}</div>
                </div>
                <div class="footer">
                    <Button type="default" @click="cancel">取消</Button>
                    <Button type="primary" @click="ok">确定</Button>
                </div>
            </div>
        </Modal>
    </div>
</template>
<script>
export default {
    name: '',
    props: ['title', 'content', 'icon', 'iconColor', 'top','width','height'],
    data() {
        return {
            configStyle: {
                '--iconColor': this.iconColor,
            },
            isShow: false,
            rowData: null
        };
    },
    components: {},
    computed: {},
    beforeMount() { },
    mounted() { },
    methods: {
        onShow(show, row) {
            this.rowData = row;
            this.isShow = show ? show : !this.isShow;
        },
        ok() {
            this.$emit('onRemove', this.rowData)
            this.onShow(false)
        },
        cancel() {
            this.$emit('onCancel', this.rowData)
            this.onShow(false)
        },
    },
    watch: {}
}
</script>
<style>
.i_remove .ivu-modal-body {
    padding: 0 !important;
}
</style>
<style lang='less' scoped>
@iconSize: 32px;
.content {
    background-color: #fff;
    height: 160px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    font-size: 18px;
    border-radius: 5px;
    .header {
        display: flex;
        justify-content: start;
        height: 30%;
        align-items: end;
        .icon {
            border: 2px solid var(--iconColor);
            width: @iconSize;
            height: @iconSize;
            margin-left: 15%;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
        }
        .title {
            width: 40%;
            margin-left: 20px;
        }
    }
    .view {
        width: 100%;
        height: 30%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .text {
            width: 80%;
            margin-left: 25%;
        }
    }
    .footer {
        height: 30%;
        display: flex;
        justify-content: end;
        align-items: center;
        button {
            margin-right: 20px;
        }
    }
}
</style>